<template>
	<view class="content">
		<view style="display: flex;">
			<view class="to_task">
				<u-icon name="order" color="#c7ae7c" size="28"></u-icon>
				<view class="txt">进行工单</view>
				<view class="tip" v-if="totalCount != 0">{{totalCount}}</view>
			</view>
<!-- 			<view class="to_task">
				<u-icon name="bell" color="#c7ae7c" size="28"></u-icon>
				<view class="txt">待办工单</view>
				<view class="tip">0</view>
			</view> -->
		</view>
		<view v-for="(item,index) in taskList " :key="index">
			<view class="showTask" @click="taskDetail(item.taskId,item.taskCode)">
				<view class="task_number">
					<view class="task_order">{{item.taskCode}}</view>
					<text
						:class="'status-' + item.taskStatusTypeEntity.statusId">{{item.taskStatusTypeEntity.statusName}}</text>
					<view class="task_time">{{formatDateTime(item.createTime)}}</view>
				</view>
				<view class="task_addr">
					<u-icon name="map" color="#efa66d" size="18"></u-icon>
					<view class="addr">{{item.addr}}</view>
				</view>
			</view>
		</view>
		<view class="show_text" v-if="totalCount == 0"> 您暂无工单任务！</view>
	</view>
</template>

<script>
	import {
		search
	} from '@/api/task/task.js'
	export default {
		data() {
			return {
				userId: this.$store.state.user.userId,
				taskList: [],
				totalCount: 0
			}
		},
		onLoad() {
			this.getTask();
		},
		onShow() {
			this.getTask();
		},
		onPullDownRefresh() {
			console.log('开始下拉刷新...');
			this.getTask();
			setTimeout(function() {
				uni.stopPullDownRefresh();
				console.log('停止下拉刷新...');
			}, 1500);
		},
		methods: {
			formatDateTime(isoString) {
				if (!isoString) return '';
			
				const date = new Date(isoString);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
			
				// 返回格式化的日期时间字符串
				return `${year}-${month}-${day} ${hour}:${minute}`;
			},
			getTask() {
				search(this.userId, 2).then(res => {
					this.taskList = res.currentPageRecords
					this.totalCount = res.totalCount
				})
			},

			taskDetail(taskId, taskCode) {
				console.log(taskId, taskCode);
				this.$tab.navigateTo(`/pages/task/taskDetail?taskId=${taskId}&taskCode=${taskCode}`);
			}
		}
	};
</script>

<style>
	/* 确保 html 和 body 没有默认的 margin 和 padding */
	html,
	body {
		margin: 0;
		padding: 0;
	}

	.status-1 {
		background-color: #fb6361;
		font-size: 10px;
		margin-left: 15px;
		padding: 3px 8px;
		color: #000;
		border-radius: 10px;
	}

	.status-2 {
		background-color: #faad53;
		font-size: 10px;
		margin-left: 15px;
		padding: 3px 8px;
		color: #000;
		border-radius: 10px;
	}

	.status-3 {
		background-color: #9e9e9e;
		font-size: 10px;
		margin-left: 15px;
		padding: 3px 8px;
		color: #000;
		border-radius: 10px;
	}

	.status-4 {
		background-color: #d8945b;
		font-size: 10px;
		margin-left: 15px;
		padding: 3px 8px;
		color: #000;
		border-radius: 10px;
	}

	.to_task {
		margin-top: 10px;
		margin-left: 5px;
		margin-right: 5px;
		display: flex;
	}

	.to_task .txt {
		font-size: 20px;
		font-weight: bold;
		padding: 0 15px;
	}

	.to_task .tip {
		font-size: 12px;
		border-radius: 50%;
		color: white;
		background-color: #ff7676;
		width: 16px;
		height: 16px;
		text-align: center;
	}

	.showTask {
		margin: 20px 10px;
		padding: 20px 10px;
		background-color: #ffffff;
		border-radius: 10px;
	}

	.task_number {
		display: flex;
		justify-content: space-between;
	}

	.task_number .task_order {
		font-size: 16px;
		padding-left: 15px;
		font-weight: bold;
	}

	.task_number .value1 {
		background-color: #fab055;
		font-size: 10px;
		margin-left: 15px;
		padding: 3px 8px;
		color: #000;
		border-radius: 10px;
	}

	.task_addr {
		margin-top: 10px;
		margin-left: 15px;
		display: flex;
	}

	.task_addr .addr {
		margin-left: 8px;
	}
	.show_text {
		text-align: center;
		margin-top: 200px;
		font-size: 20px;
		color: #999999;
	}
</style>